<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>MDX定义</title>
<link href="../js/ext-4.2.1.883/resources/css/ext-all-debug.css"
	type="text/css" rel="stylesheet">
<script src="../js/ext-4.2.1.883/ext-all-debug.js"
	type="text/javascript"></script>
<script type="text/javascript">
    Ext.require([
                 'Ext.data.*',
                 'Ext.grid.*',
                 'Ext.tree.*'
             ]);
             Ext.onReady(function() {    
                 Ext.regModel('Task', {
                     fields: [
                         {name: 'task',     type: 'string'},
                         {name: 'user',     type: 'string'},
                         {name: 'duration', type: 'string'}
                     ]
                 });
                 
                 var store = new Ext.data.TreeStore({
                     model: 'Task',
                     proxy: {
                         type: 'ajax',
                         url: 'datas.json'
                     },
                     root: {
                         expanded: true
                     }
                 });
                 
                 var tree = new Ext.tree.TreePanel({
                     title: 'Core Team Projects',
                     
                     width: 500,
                     height: 300,
                     renderTo: 'tree-example',
                     useArrows: true,
                     rootVisible: false,
                     
                     store: store,
                     
                     headers: [{
                         xtype: 'treeheader', //this is so we know which column will show the tree
                         text: 'Task',
                         flex: 2,
                         dataIndex: 'task'
                     },{
                         xtype: 'templateheader',
                         text: 'Duration',
                         flex: 1,
                         dataIndex: 'duration',
                         align: 'center',
                         tpl: new Ext.XTemplate('{duration:this.formatHours}', {
                             formatHours: function(v) {
                                 if (v < 1) {
                                     return Math.round(v * 60) + ' mins';
                                 } else if (Math.floor(v) !== v) {
                                     var min = v - Math.floor(v);
                                     return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                                 } else {
                                     return v + ' hour' + (v === 1 ? '' : 's');
                                 }
                             }
                         })
                     },{
                         text: 'Assigned To',
                         flex: 1,
                         dataIndex: 'user'
                     }]
                 });
             });
             </script>
</head>
<body>
	<div id="tree-example"></div>
</body>
</html>
